<template>
  <div class="pic-box" >
    <div class="picture-item" @click="picBox(item)" >
      <div class="picture"><img class="item-pic" :src="PicSrc(item.storeId)"  :onerror="PicErr" alt=""></div>
      <p class="txt">{{item.name}}</p>
      <img class="pic-checkbox" :src="PicChecked" v-show="ischeckedAry">
    </div>
  </div>
</template>

<script>

export default {
  name: 'picBox',
  props: {
    item: Object,
    checkBoxShow: Boolean,
    ischeckedAry: Boolean
  },
  data (){
    return {
      PicErr: 'this.src="' + require('@/assets/error.png') + '"',  //img加载失败的图片
      PicChecked: require('@/assets/left-top-checked.png'),  //picBox选中显示的图片
      ischecked: false
    }
  },
  created (){
   
  },
  methods: {
    /**
     * 返回文件服务的地址
     */
    PicSrc(storeId) {
      return baseURL                                          //运行环境
             + 'api/jp-TIFS-FileCenter-ms/file?businessId='  //微服务地址
             + storeId
    },
    /**
     *点击图片item返回出所选图片的id，如果checkBox显示，则改变checkBox的状态，同时保存数据
     */
    picBox(item) {
      if(this.checkBoxShow) {
        this.ischecked = !this.ischecked;
        this.$emit('checkedAryFn', {ischecked:this.ischecked, item})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pic-box {
  text-align: center;
  .picture-item {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 139.5px;
    padding-top: 14px;
    border-radius: 3px;
    box-shadow:  0 7px 12px 4px #e2e2e2;
    background-color: #f0f4fa;
   
    .picture {
      width: 90px;
      height: 90px;
      margin: 0 0 10px 16px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      user-select: none;
      background-color: #29333d;
      .item-pic {
        max-width: 90px;
        max-height: 90px;
        border: 6px solid transparent;
      }
    }
    .txt {
      margin: 0;
      text-align: center;
      line-height: 16px;
      font-size: 14px;
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
    }
    
    .pic-checkbox {
      position: absolute;
      top: 12px;
      left: 14px;
    }
  }
}
</style>


